<div ng-controller="draggableCtrl">
  <p>( Drag car from the <strong>list of cars</strong> to the <strong>basket</strong>. )</p>
  <div class="rows">
    <div class="col-md-3">
      <ul id="car-list" class="list-group">
        <li class="list-group-item active">List of Cars</li>
        <!-- ad_example_start -->
        <!-- ========== Usage Drag ========== -->
        <li class="list-group-item"
            ad-drag="true"
            ad-drag-data="car"
            ad-drag-begin="onDragStart($data, $dragElement, $event);"
            ad-drag-end="onDataEnd($data, $dragElement, $event);"
            ng-repeat="car in models.cars">
          <span>
            <span class="glyphicon glyphicon-th"></span>
            {{ car.name }} - {{ car.modelYear }} ( {{ car.price | currency }} )
          </span>
        </li>
      </ul>
      <!-- ad_example_end -->
    </div>
    <div class="col-md-4">
      <!-- ad_example_start -->
      <!-- ========== Usage Drop ========== -->
      <ul id="my-basket"
          class="list-group"
          ad-drop="true"
          ad-drop-over="onDragOver($data, $dragElement, $dropElement, $event);"
          ad-drop-end="onDrop($data, $dragElement, $dropElement, $event);">
        <li class="list-group-item disabled">My Basket</li>
        <li class="list-group-item"
            ad-drag="true"
            ng-repeat="car in models.basket">
          <span>
            <span class="glyphicon glyphicon-thumbs-up"></span>
            {{ car.name }} - {{ car.modelYear }} ( {{ car.price | currency }} )
          </span>
        </li>
        <li class="list-group-item" ng-hide="models.basket.length">
            <span> Drop here</span>
        </li>
      </ul>
      <!-- ad_example_end -->
    </div>
    <div class="col-md-3">
      <!-- ad_example_start -->
      <ul class="list-group">
        <!-- =========== Drag with handles ============= -->
        <li class="list-group-item"
            ad-drag="true"
            ad-drag-handle="true">
          <span class="ad-drag-handle glyphicon glyphicon-align-justify"></span>
          Drag me using my handle
        </li>
        <!-- =========== Drag on the whole element ============= -->
        <li class="list-group-item"
            ad-drag="true">
          Drag me without handle
        </li>
      </ul>
      <!-- ad_example_end -->
    </div>
  </div>
</div>
